<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>html&amp;css基础知识 - 肉蛋葱鸡肉粥🍛的博客☕</title><meta name="Description" content=""><meta property="og:title" content="html&amp;css基础知识" />
<meta property="og:description" content="meta标签作用 设置网页字符集 设置keywords 设置网页描述信息 网页重定向 设置移动端的视口大小 1 2 3 4 5 6 7 8 9 &lt;!DOCTYPE html&gt;//代表" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-07-08T17:01:53+08:00" />
<meta property="article:modified_time" content="2021-07-08T17:01:53+08:00" /><meta property="og:site_name" content="肉蛋葱鸡肉粥🍛的博客☕" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="html&amp;css基础知识"/>
<meta name="twitter:description" content="meta标签作用 设置网页字符集 设置keywords 设置网页描述信息 网页重定向 设置移动端的视口大小 1 2 3 4 5 6 7 8 9 &lt;!DOCTYPE html&gt;//代表"/>
<meta name="application-name" content="肉蛋葱鸡肉粥🍛的博客☕">
<meta name="apple-mobile-web-app-title" content="肉蛋葱鸡肉粥🍛的博客☕"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" /><link rel="prev" href="http://example.org/posts/springmvc/" /><link rel="next" href="http://example.org/posts/javascript/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "html\u0026css基础知识",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/example.org\/posts\/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86\/"
        },"genre": "posts","keywords": "html, css","wordcount":  12422 ,
        "url": "http:\/\/example.org\/posts\/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86\/","datePublished": "2021-07-08T17:01:53+08:00","dateModified": "2021-07-08T17:01:53+08:00","publisher": {
            "@type": "Organization",
            "name": "yzuxqz"},"author": {
                "@type": "Person",
                "name": "yzuxqz"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" selected>简体中文</option></select>
                    </a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" selected>简体中文</option></select>
                </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">html&amp;css基础知识</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/yzuxqz" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>yzuxqz</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/html/"><i class="far fa-folder fa-fw"></i>html</a>&nbsp;<a href="/categories/css/"><i class="far fa-folder fa-fw"></i>css</a>&nbsp;<a href="/categories/%E5%89%8D%E7%AB%AF/"><i class="far fa-folder fa-fw"></i>前端</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-08">2021-07-08</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 12422 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 25 分钟&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#无序">无序</a></li>
    <li><a href="#有序">有序</a></li>
    <li><a href="#定义">定义</a></li>
  </ul>

  <ul>
    <li><a href="#常用选择器">常用选择器</a></li>
    <li><a href="#复合选择器">复合选择器</a></li>
    <li><a href="#关系选择器">关系选择器</a></li>
    <li><a href="#属性选择器">属性选择器</a></li>
    <li><a href="#伪类选择器">伪类选择器</a></li>
    <li><a href="#否定伪类选择器">否定伪类选择器</a></li>
    <li><a href="#伪元素">伪元素</a></li>
    <li><a href="#超链接的伪类">超链接的伪类</a></li>
    <li><a href="#选择器权重">选择器权重</a></li>
  </ul>

  <ul>
    <li><a href="#块元素">块元素</a></li>
    <li><a href="#行内元素">行内元素</a></li>
    <li><a href="#块元素-1">块元素</a></li>
    <li><a href="#行内元素-1">行内元素</a></li>
    <li><a href="#行内块元素">行内块元素</a></li>
    <li><a href="#水平方向布局">水平方向布局</a></li>
    <li><a href="#垂直方向布局">垂直方向布局</a></li>
    <li><a href="#垂直外边距的重叠">垂直外边距的重叠</a></li>
  </ul>

  <ul>
    <li><a href="#相对定位">相对定位</a></li>
    <li><a href="#绝对定位">绝对定位</a></li>
    <li><a href="#固定定位">固定定位</a></li>
    <li><a href="#粘性定位">粘性定位</a></li>
    <li><a href="#定位堆叠顺序">定位堆叠顺序</a></li>
  </ul>

  <ul>
    <li><a href="#线性渐变">线性渐变</a></li>
    <li><a href="#径向渐变">径向渐变</a></li>
  </ul>

  <ul>
    <li><a href="#平移">平移</a></li>
    <li><a href="#平行四边形">平行四边形</a></li>
    <li><a href="#旋转">旋转</a></li>
    <li><a href="#缩放">缩放</a></li>
    <li><a href="#变形的原点">变形的原点</a></li>
  </ul>

  <ul>
    <li><a href="#弹性容器">弹性容器</a></li>
    <li><a href="#弹性元素">弹性元素</a></li>
    <li><a href="#主轴">主轴</a></li>
    <li><a href="#侧轴">侧轴</a></li>
  </ul>

  <ul>
    <li><a href="#物理像素">物理像素</a></li>
    <li><a href="#css像素">css像素</a></li>
    <li><a href="#视口">视口</a></li>
    <li><a href="#手机像素">手机像素</a></li>
    <li><a href="#完美视口">完美视口</a></li>
  </ul>

  <ul>
    <li><a href="#vw适配">vw适配</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h1 id="meta标签作用">meta标签作用</h1>
<ol>
<li>设置网页字符集</li>
<li>设置keywords</li>
<li>设置网页描述信息</li>
<li>网页重定向</li>
<li>设置移动端的视口大小</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>//代表网页版本是HTML5
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>//charser：设置网页的字符集
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span><span class="p">&gt;</span>//name：（keywords（网页关键字，给搜索引擎看的），description（站点的主要内容，搜索到之后网页上显示的对网站的描述））指定的数据名称，content：指定的数据的内容
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&#34;refresh&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;3;url=http://www.baidu.com&#34;</span><span class="p">&gt;</span>//3秒后跳转
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>//title标签的内容作为搜索结果的超链接文字内容
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h1 id="link和import的区别">link和@import的区别</h1>
<p><strong>1.从属关系区别</strong>
<code>@import</code>是 CSS 提供的语法规则，只有导入样式表的作用；<code>link</code>是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。</p>
<p><strong>2.加载顺序区别</strong>
加载页面时，<code>link</code>标签引入的 CSS 被同时加载；<code>@import</code>引入的 CSS 将在页面加载完毕后被加载。</p>
<p><strong>3.兼容性区别</strong>
<code>@import</code>是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；<code>link</code>标签作为 HTML 元素，不存在兼容性问题。</p>
<p><strong>4.DOM可控性区别</strong>
可以通过 JS 操作 DOM ，插入<code>link</code>标签来改变样式；由于 DOM 方法是基于文档的，无法使用<code>@import</code>的方式插入样式。</p>
<p><strong>5.权重区别(该项有争议，下文将详解)</strong>
<code>link</code>引入的样式权重大于<code>@import</code>引入的样式。</p>
<h1 id="实体语法">实体语法</h1>
<p>&amp;实体字符；</p>
<h1 id="语义化标签">语义化标签</h1>
<p>==注意==：</p>
<ol>
<li>一个网页h1只用一个</li>
<li>p中不能放任何块元素</li>
</ol>
<h1 id="结构化语义标签">结构化语义标签</h1>
<ol>
<li>
<p>header</p>
<p>网页头部</p>
</li>
<li>
<p>main</p>
<p>网页主体，一个网页中只有一个main</p>
</li>
<li>
<p>footer</p>
<p>网页底部</p>
</li>
<li>
<p>nav</p>
<p>导航</p>
</li>
<li>
<p>aside</p>
<p>侧边栏</p>
</li>
</ol>
<h1 id="列表">列表</h1>
<h2 id="无序">无序</h2>
<p>ul&gt;li</p>
<h2 id="有序">有序</h2>
<p>ol&gt;li</p>
<h2 id="定义">定义</h2>
<p>dl&gt;dt&amp;dd</p>
<h1 id="表单">表单</h1>
<p>用于提交数据</p>
<ol>
<li>
<p>form</p>
<p>action：用于填写提交数据的url</p>
<p>提交按钮：input type：submit</p>
</li>
<li>
<p>input //type包含：email,url,date,time,number,tel,search,color,submit,hidden,file(multipe属性：多选)，reset（重置表单值），color</p>
<p>其他属性：required,placeholder,autofocus(自动聚焦),autocomplete(off/on显示之前输入过的值)</p>
</li>
<li>
<p>文本框：text</p>
<ul>
<li>name属性相当于提交给服务器时你填写的数据的标识</li>
<li>autocomplete：off/on 关注自动补全</li>
<li>readonly：只读，会提交</li>
<li>disable：禁用，不会提交</li>
<li>autofocus：自动获取焦点</li>
</ul>
</li>
<li>
<p>单选按钮：radio</p>
<ul>
<li>name相同</li>
<li>必须填写value属性，作为最终的值传递给服务器</li>
<li>check：默认选中</li>
</ul>
</li>
<li>
<p>多选按钮：checkbox</p>
<ul>
<li>name相同</li>
<li>必须填写value属性，作为最终的值传递给服务器</li>
<li>check：默认选中</li>
</ul>
</li>
<li>
<p>下拉列表：select&gt;option</p>
<ul>
<li>必须填写value属性，作为最终的值传递给服务器</li>
<li>option中 selected：默认选中</li>
</ul>
</li>
<li>
<p>textarea</p>
</li>
<li>
<p>button</p>
</li>
<li>
<p>label //for：&ldquo;id&rdquo;，优化用户体验</p>
</li>
<li>
<p>其他常用属性</p>
<ol>
<li>readOnly：只读</li>
<li>disabled：失效</li>
<li>required：必填</li>
<li>value：默认值</li>
<li>maxLength：规定输入字符最大数量</li>
<li>autocomplete：自动补全</li>
<li>autofocus：自动获得焦点</li>
</ol>
</li>
</ol>
<h1 id="表格">表格</h1>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span>
		<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>//行
			<span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>//表头
		<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
	<span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
		<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
			<span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
		<span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
	<span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">tfoot</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">tfoot</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>合并表格：</p>
<ol>
<li>colspan=&ldquo;x&rdquo; //合并x列</li>
<li>rowspan=“y” //合并y行</li>
<li>先找第几行，第几列开始合并</li>
<li>合并</li>
<li>删除多余行列</li>
</ol>
<p>表格的样式</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">table</span><span class="p">{</span>
	<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">black</span><span class="p">;</span> <span class="err">//这里设置的是外围边框</span>
    <span class="k">border-spacing</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span>  <span class="o">//</span><span class="err">指定边框间的距离</span><span class="p">(</span><span class="err">是</span><span class="mi">0</span><span class="err">时，是两个边框重叠宽度为</span><span class="mi">2</span><span class="p">)</span>
    <span class="k">border-collapse</span><span class="o">:</span><span class="kc">collapse</span><span class="p">;</span> <span class="err">//指定边框的合并（此时边框为1px，不会重叠）</span>
<span class="p">}</span>
<span class="nt">td</span><span class="p">{</span>
	<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">black</span> <span class="o">//</span><span class="err">这里设置的是内部边框</span>
<span class="p">}</span>
<span class="o">//</span><span class="nt">表格隔行变色</span>
<span class="nt">tr</span><span class="p">{</span>
    <span class="k">background-color</span><span class="p">:</span><span class="mh">#xxxxx</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="nt">tr</span><span class="p">:</span><span class="nd">nth-child</span><span class="o">(</span><span class="nt">even</span><span class="o">)</span><span class="p">{</span>
    <span class="k">background-color</span><span class="p">:</span><span class="mh">#xxxxx</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>
<p>表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放入tbody中，tr不是table的子元素，所以无法使用table&gt;tr选择tr，要用tbody&gt;tr</p>
</li>
<li>
<p>默认情况下，元素在td中是垂直居中的。可以通过vertical-align来修改，水平居中用text-align：center</p>
</li>
<li>
<p>块元素在块元素中的垂直居中方法：</p>
<ol>
<li>display：table-cell   //将父元素设置为单元格</li>
<li>vertical-align：middle</li>
</ol>
<p>水平居中：</p>
<ol>
<li>给父元素text-align：center  或者  给子元素margin: 0 auto</li>
</ol>
</li>
</ol>
<h1 id="超链接">超链接</h1>
<ol>
<li>
<p>a中可以放任何元素，除了本身</p>
</li>
<li>
<p>target属性：</p>
<p>_self 默认值，在当前页面打开超链接</p>
<p>_blank 在一个新的页面打开超链接</p>
</li>
<li>
<p>跳转到页面指定位置：href=”#id“</p>
</li>
<li>
<p>在使用时一般将a标签转为块级元素</p>
</li>
</ol>
<h1 id="图片标签">图片标签</h1>
<ol>
<li>
<p>alt属性：</p>
<p>图片无法加载时显示，供搜索引擎寻找</p>
</li>
<li>
<p>title属性：</p>
<p>鼠标移入显示额外信息</p>
</li>
<li>
<p>宽高只修改一个，另一个会等比缩放</p>
</li>
</ol>
<h1 id="内联框架">内联框架</h1>
<p>iframe</p>
<ol>
<li>在当前页面中引入其他页面</li>
<li>src：要引入的网址</li>
<li>frameborder：内联框架边框</li>
</ol>
<h1 id="音视频播放">音视频播放</h1>
<p>audio&amp;&amp;video</p>
<ol>
<li>
<p>controls属性：</p>
<p>用户控制播放</p>
</li>
<li>
<p>autoplay属性：</p>
<p>自动播放</p>
</li>
<li>
<p>loop属性：</p>
<p>循环播放</p>
</li>
</ol>
<p>==注意==：</p>
<ol>
<li>默认情况下不允许用户自己控制播放停止</li>
<li>可以用iframe将其他网站的视频放到网页中播放</li>
<li>js中用audio.play()开启播放</li>
</ol>
<h1 id="选择器">选择器</h1>
<h2 id="常用选择器">常用选择器</h2>
<ol>
<li>标签选择器</li>
<li>id选择器</li>
<li>类选择器</li>
</ol>
<h2 id="复合选择器">复合选择器</h2>
<ol>
<li>
<p>交集选择器</p>
<p>div.xxx//同时满足div和类</p>
</li>
<li>
<p>并集选择器</p>
<p>div,p,.xxx</p>
</li>
</ol>
<h2 id="关系选择器">关系选择器</h2>
<ol>
<li>
<p>子元素选择器</p>
<p>仅仅是下一层的标签</p>
<p>ul li&gt;a</p>
</li>
<li>
<p>后代选择器</p>
<p>后代中所有的标签</p>
<p>ul li a</p>
</li>
<li>
<p>兄弟选择器</p>
<p>ul li + div //紧接在li后面的div</p>
<p>ul li ~ div //li后面的所有div</p>
</li>
</ol>
<h2 id="属性选择器">属性选择器</h2>
<ol>
<li>
<p>标签中含有属性</p>
<p>input[value]</p>
</li>
<li>
<p>标签中含有属性且值确定</p>
<p>input[type=&ldquo;password&rdquo;]</p>
</li>
<li>
<p>标签中含有属性且值以xxx开头</p>
<p>input[class^=&ldquo;icon&rdquo;]</p>
</li>
</ol>
<h2 id="伪类选择器">伪类选择器</h2>
<ol>
<li>father li:first-child</li>
<li>father li:last-child</li>
<li>father li:nth-child(3)</li>
<li>father li:nth-child(n)//n从0开始，每次+1（-n+4）</li>
</ol>
<p>==注意==：</p>
<p>先从father的下一层中找第几个，再判断是不是li，如果不是则样式无效</p>
<ol>
<li>father li:nth-of-type(n)</li>
</ol>
<p>==注意==：</p>
<p>先从father的下一层中判断是不是li，再从是li的里面选择第n个</p>
<h2 id="否定伪类选择器">否定伪类选择器</h2>
<p>:not()  //除了</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">nav-wrapper</span> <span class="p">.</span><span class="nc">nav</span> <span class="nt">li</span><span class="p">:</span><span class="nd">not</span><span class="o">(</span><span class="p">:</span><span class="nd">first-of-type</span><span class="o">)</span><span class="p">:</span><span class="nd">not</span><span class="o">(</span><span class="p">:</span><span class="nd">nth-child</span><span class="o">(</span><span class="nt">9</span><span class="o">))</span><span class="p">:</span><span class="nd">not</span><span class="o">(</span><span class="p">:</span><span class="nd">nth-child</span><span class="o">(</span><span class="nt">10</span><span class="o">))</span><span class="p">:</span><span class="nd">hover</span> <span class="o">~</span> <span class="p">.</span><span class="nc">goods-info</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="伪元素">伪元素</h2>
<ol>
<li>::before //元素的开始</li>
<li>::after //元素的最后</li>
<li>::first-letter //选择第一个字母</li>
<li>::first-letter //选择第一行</li>
<li>::section //选中的内容</li>
</ol>
<p>==注意==：</p>
<p>::before和::after必须结合content属性来用</p>
<h2 id="超链接的伪类">超链接的伪类</h2>
<ol>
<li>a {}或者 a:link{} //未访问</li>
<li>a:visited //已访问</li>
<li>a:hover //鼠标经过</li>
<li>a:active //按下未松开</li>
<li>input:foucs //获得焦点得表单元素</li>
</ol>
<h2 id="选择器权重">选择器权重</h2>
<table>
<thead>
<tr>
<th>选择器</th>
<th>权重</th>
</tr>
</thead>
<tbody>
<tr>
<td>继承/*</td>
<td>0，0，0，0</td>
</tr>
<tr>
<td>标签</td>
<td>0，0，0，1</td>
</tr>
<tr>
<td>类/伪类/属性</td>
<td>0，0，1，0</td>
</tr>
<tr>
<td>id</td>
<td>0，1，0，0</td>
</tr>
<tr>
<td>行内样式表</td>
<td>1，0，0，0</td>
</tr>
<tr>
<td>！imprtant</td>
<td>无穷大（在属性后加）</td>
</tr>
</tbody>
</table>
<h1 id="继承">继承</h1>
<ol>
<li>后代会继承祖先的样式</li>
<li>背景布局相关的不会被继承</li>
<li>height不会被继承，只能用100%，且必须父亲有高度</li>
<li>视距perspective不会被继承</li>
</ol>
<h1 id="像素和百分比">像素和百分比</h1>
<ol>
<li>像素可以看成小点，不同屏幕的像素大小不同，像素越小，屏幕越清晰。所以同样的200px在不同设备下的显示效果就不一样</li>
<li>可以将宽高设置为相对于父元素的百分比</li>
</ol>
<h1 id="em和rem">em和rem</h1>
<ol>
<li>1em=1font-size，是相对于元素字体来算的，默认16px</li>
<li>rem是相对于根元素（html）的字体大小来计算的</li>
</ol>
<h1 id="盒子模型">盒子模型</h1>
<h2 id="块元素">块元素</h2>
<ol>
<li>独占一行</li>
<li>默认宽度是父元素的全部，默认高度是内容高度</li>
</ol>
<h2 id="行内元素">行内元素</h2>
<ol>
<li>不会独占一行，只占自身的大小，一行容纳不下会换到第二行</li>
<li>宽高都由内容决定</li>
</ol>
<h2 id="块元素-1">块元素</h2>
<ol>
<li>content：width和height设置的是内容区的大小，设置盒子模型为border-box则是盒子包括padding，border的大小</li>
<li>padding</li>
<li>border：border-width（上右下左，上 左右 下，上下 左右）,border-style,border-color</li>
<li>margin：如果是负值，元素会向相反的方向移动</li>
</ol>
<h2 id="行内元素-1">行内元素</h2>
<ol>
<li>不支持设置width和height</li>
<li>可以设置padding，但是垂直方向不会影响布局，只会覆盖</li>
<li>可以设置border，垂直方向不会影响布局</li>
<li>可以设置margin，垂直方向不会影响布局，水平方向不会合并，取和</li>
<li>父元素text-align:center:水平居中</li>
</ol>
<h2 id="行内块元素">行内块元素</h2>
<ol>
<li>可以设置width和height</li>
<li>不会独占一行</li>
<li>text-align:center:水平居中</li>
<li>vertical-align:middle</li>
</ol>
<p>==注意==：</p>
<ol>
<li>行内块之间会有缝隙，是写标签时换行引起的</li>
<li>display用来设置标签显示的类型，display：none//元素不显示且不占位置，visibility：hidden//元素不显示但是占位置</li>
</ol>
<h2 id="水平方向布局">水平方向布局</h2>
<p>子元素的水平content+padding+border+margin之和必须等于父元素的content宽度</p>
<ul>
<li>如果等式不成立，浏览器会自动调整margin-right的值以使得等式成立</li>
<li>如果1个值为auto，则自动调整auto的值以使等式成立</li>
<li>3个auto，只调整width</li>
<li>左右margin为2个auto，则左右外边距对分，所以==子元素在父元素中的水平居中==：width：xxxpx；margin：0 auto</li>
</ul>
<h2 id="垂直方向布局">垂直方向布局</h2>
<ol>
<li>如果父元素不设置高度，父元素的高度被内容撑开</li>
<li>如果父元素设置了高度，子元素的高度超过了父元素的高度，则会溢出（父元素：overflow:hidden/scroll/auto）</li>
</ol>
<h2 id="垂直外边距的重叠">垂直外边距的重叠</h2>
<p>相邻的垂直方向外边距会发生重叠现象</p>
<ol>
<li>
<p>兄弟元素</p>
<p>去两者外边距之间的较大值</p>
<p>特殊情况：如果外边距一正一负取两者的和，如果都是负值，则取绝对值较大的</p>
</li>
<li>
<p>父子元素</p>
<p>父子元素间相邻外边距，子元素的会传递给父元素（上外边距）</p>
<ul>
<li>给父元素加上边框</li>
<li>.clearfix::before,.clear::after{content:'';display:table;clear:both}
<ol>
<li>::before{content:'';display:table)是为了解决垂直外边距合并的问题</li>
<li>.clear::after(clear:both)是为了解决高度塌陷问题</li>
</ol>
</li>
</ul>
</li>
</ol>
<h1 id="浏览器默认样式">浏览器默认样式</h1>
<ol>
<li>*{margin:0,padding:0,list-style:none}</li>
</ol>
<h1 id="盒子的大小">盒子的大小</h1>
<p>box-sizing</p>
<ol>
<li>content-box:默认值，宽度和高度用来设置内容区大小</li>
<li>border-box：宽高设置整个盒子的大小</li>
</ol>
<h1 id="盒子阴影">盒子阴影</h1>
<p>box-shadow</p>
<ol>
<li>水平偏移量</li>
<li>垂直偏移量</li>
<li>阴影模糊半径</li>
<li>阴影颜色</li>
</ol>
<h1 id="圆角">圆角</h1>
<p>border-radius：50%</p>
<h1 id="浮动">浮动</h1>
<ol>
<li>脱离标准流，所以元素下方还在文档流的元素会自动上移</li>
<li>水平布局等式失效</li>
<li>不会从父元素中移出</li>
<li>浮动元素不会覆盖其他浮动的元素</li>
<li>如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移</li>
</ol>
<p>==特点==：</p>
<ol>
<li>
<p>浮动不会盖住文字（包括行内块，如input），文字会环绕在浮动元素周围</p>
</li>
<li>
<p>块元素：</p>
<ol>
<li>不再独占一行</li>
<li>宽度不再是全屏，而是宽高随内容撑开</li>
</ol>
</li>
<li>
<p>行内元素：</p>
<p>特点和脱离文档流的块元素一样</p>
</li>
</ol>
<h1 id="高度塌陷和bfc">高度塌陷和BFC</h1>
<p>在浮动布局中，父元素没有设置高度，子元素浮动，会导致父元素高度丢失，导致下面的元素上移</p>
<p>解决：</p>
<ol>
<li>
<p>父元素定高度</p>
</li>
<li>
<p>BFC：Block Format Content(块级格式化环境)</p>
<ul>
<li>
<p>BFC是css中一个隐藏的属性，为一个元素开启BFC后该元素会变成一个独立的布局区域</p>
</li>
<li>
<p>元素开启BFC后的特点：</p>
<ol>
<li>不会被上面浮动的元素所覆盖</li>
<li>不会有父子元素间的垂直外边距合并问题</li>
<li>可以解决高度塌陷问题</li>
</ol>
</li>
<li>
<p>开启方法：</p>
<p>父元素：overflow：hidden</p>
</li>
</ul>
</li>
<li>
<p>clear：见下面</p>
</li>
<li>
<p>一般用clearfix类，见上面，就是用的clear属性</p>
</li>
</ol>
<h1 id="clear">clear</h1>
<p>作用：清除浮动元素对当前元素产生的影响，后面的元素会上移</p>
<ol>
<li>left：清除左浮动元素对当前元素的影响</li>
<li>right：清除右浮动元素对当前元素的影响</li>
<li>both：left和right中最大影响的那侧</li>
</ol>
<p>原理：浏览器会为元素添加margin-top值，以使其位置不受浮动元素影响</p>
<p>解决高度塌陷：</p>
<ol>
<li>在父元素的最后用::after为元素设置一个没有脱离文档流的盒子，位置在浮动元素的下方</li>
<li>如何到下方，则给伪元素用clear：both，此时父元素需要包住该盒子，则就会有高度了</li>
</ol>
<h1 id="定位">定位</h1>
<h2 id="相对定位">相对定位</h2>
<p>position：relative</p>
<ol>
<li>参照于元素在文档流中的位置进行定位的</li>
<li>会提升元素的层级</li>
<li>不会使元素脱离文档流</li>
<li>不会改变元素类型（块，行内）</li>
</ol>
<h2 id="绝对定位">绝对定位</h2>
<p>position：absolute</p>
<ol>
<li>元素脱离文档流,相当于块级盒子脱离文档流，行内元素变成脱离文档流的块元素</li>
<li>会提升元素层级</li>
<li>相对于具有定位的祖先元素进行定位</li>
<li>否则，以html根元素为准</li>
</ol>
<p>==注意==：</p>
<ol>
<li>水平居中不能用：margin：0 atuo，需要先设置left和right，此时等式多了两个值。或者先left：50%，再往左自身的一半margin-left：-xxxpx</li>
</ol>
<h2 id="固定定位">固定定位</h2>
<p>position：fixed</p>
<ol>
<li>是一种特殊的绝对定位，不同的是永远以浏览器的视口进行定位</li>
<li>不占原位置</li>
<li>固定在版心右侧：left：50%，margin-left:版心宽度一半</li>
</ol>
<h2 id="粘性定位">粘性定位</h2>
<p>position:sticky</p>
<ol>
<li>以浏览器伪基准，在元素到达某个位置时将其固定</li>
<li>占有原位置</li>
<li>必须添加left，top其一</li>
</ol>
<p>==注意==：</p>
<ol>
<li>添加绝对定位和粘性定位变成行内块元素</li>
<li>浮动定位都不会外边距合并</li>
</ol>
<h2 id="定位堆叠顺序">定位堆叠顺序</h2>
<p>z-index :   //数值越大越往上</p>
<p>==注意==：</p>
<ol>
<li>祖先元素的层级再高也不会覆盖后代元素</li>
</ol>
<h1 id="绝对定位元素的水平布局">绝对定位元素的水平布局</h1>
<ol>
<li>开启绝对定位后，水平方向多了left和right两个值</li>
<li>当发生过度约束（也就是不满足9个值相加的等式）
<ol>
<li>如果9个值中没有auto，则自动调整right值</li>
<li>有auto，自动调整auto值</li>
</ol>
</li>
<li>可以设置auto值的属性：margin width left right</li>
<li>因为left和right默认值为auto，所以如果不知道left和right，则等式不满足时会自动调整这两个值，如果left和right已经确定，且width为auto则会调整width，如果leftright和width都确定则会调整margin</li>
</ol>
<p>==注意==：</p>
<ol>
<li>
<p>绝对定位的元素想要水平居中：</p>
<ul>
<li>left：0；right：0</li>
<li>然后设置margin-left和margin-right：auto，此时等式不成立会自动调整auto的值，前提时left和right已经设置了值，否则不会调整margin，无法居中</li>
</ul>
<p>==区别==：</p>
<p>文档流中居中：margin：0 auto</p>
<p>绝对定位居中：left：0；right：0；：margin：0 auto</p>
</li>
</ol>
<h1 id="绝对定位元素的垂直布局">绝对定位元素的垂直布局</h1>
<p>与文档流中的不同，垂直方向的等式（9个值）也必须满足</p>
<p>所以垂直居中：top：0；buttom：0；margin-top：auto；margin-buttom：auto</p>
<h1 id="等式不成立默认调整顺序">等式不成立默认调整顺序</h1>
<p>前提都为auto</p>
<p>绝对定位：</p>
<ol>
<li>水平：right-&gt;left-&gt;width-&gt;margin</li>
<li>垂直：buttom-&gt;top-&gt;width-&gt;margin</li>
</ol>
<p>文档流：</p>
<ol>
<li>水平：width-&gt;margin</li>
<li>垂直：无等式要求</li>
</ol>
<h1 id="字体">字体</h1>
<ol>
<li>color</li>
<li>font-size</li>
<li>font-family</li>
<li>@font-face：可以将服务器中的字体直接提供给用户使用
<ul>
<li>font-family：//自己给字体起名</li>
<li>src:url() format()；//服务器上字体的路径 字体格式</li>
</ul>
</li>
</ol>
<p>字体简写：</p>
<p>font：weight style 字体大小/行高 字体族</p>
<p>==注意==：</p>
<ol>
<li>行高如果不写，会使用默认值</li>
</ol>
<h1 id="图标字体">图标字体</h1>
<ol>
<li>用font-face的形式对字体进行引入</li>
</ol>
<h1 id="行高">行高</h1>
<ol>
<li>行高指的是文字占有的实际高度</li>
<li>可以通过line-height来设置行高</li>
<li>行高可以直接指定大小，可直接给行高设置整数，如果是整数，则行高是字体大小的倍数（默认1.333）</li>
</ol>
<ul>
<li>
<p>字体框：</p>
<p>​	字体存在的格子，设置font-size实际上就是设置字体框的高度</p>
<p>​	==行高会在字体框的上下平均分配==</p>
</li>
<li>
<p>字体居中：</p>
<p>line-height=height</p>
</li>
</ul>
<h1 id="文本的水平对齐">文本的水平对齐</h1>
<p>text-align：left right center justify（两端对齐）</p>
<h1 id="文本的垂直对齐">文本的垂直对齐</h1>
<p>vertical-align：设置元素垂直对齐</p>
<ol>
<li>baseline：默认值 基线对齐</li>
<li>top：顶部对齐</li>
<li>bottom：底部对齐</li>
<li>middle：居中对齐  注意：是将子元素的中线和字母x的中线对齐</li>
</ol>
<p>注意：图片的默认对齐方式是基线对齐，会导致下面有空隙，将img的vertical-align设置为top。</p>
<h1 id="其他文本样式">其他文本样式</h1>
<ol>
<li>
<p>text-decoration:underline color</p>
<ul>
<li>none</li>
<li>underline 下划线</li>
<li>line-through 删除线</li>
<li>overline 上划线</li>
</ul>
</li>
<li>
<p>省略文字</p>
<p>.xxx{</p>
<p>​	white-space：nowrap；//不换行</p>
<p>​	overflow：hidden；</p>
<p>​	text-overflow：ellipsis；//溢出的内容变成省略号</p>
<p>}</p>
<ol>
<li>white-space：设置网页如何处理空白
<ul>
<li>normal</li>
<li>nowrap 不换行</li>
<li>pre 保留空白（保留多个空白和换行）</li>
</ul>
</li>
</ol>
</li>
</ol>
<h1 id="背景">背景</h1>
<ol>
<li>
<p>background-color</p>
</li>
<li>
<p>background-image</p>
<ul>
<li>url</li>
</ul>
</li>
<li>
<p>background-repeat</p>
<ul>
<li>repeat</li>
<li>repeat-x</li>
<li>repeat-y</li>
<li>no-repeat</li>
</ul>
</li>
<li>
<p>background-position</p>
<p>九宫格</p>
<ul>
<li>top</li>
<li>left</li>
<li>right</li>
<li>center</li>
</ul>
<p>注意：</p>
<ol>
<li>注意要写==两个值==（水平和垂直），如果不写就是默认center</li>
<li>或者使用水平和垂直偏移量</li>
</ol>
</li>
<li>
<p>background-clip</p>
<ol>
<li>border-box  //默认值，背景会出现在边框的下边</li>
<li>padding-box  //背景不会出现在边框下边，只出现在内容区和内边距</li>
<li>content-box //背景只出现在内容区</li>
</ol>
</li>
<li>
<p>background-origin</p>
<ol>
<li>padding-box  //默认值，图片从内边距左上角开始计算</li>
<li>content-box //图片从内容区左上角开始计算</li>
<li>border-box //图片从边框左上角开始计算</li>
</ol>
</li>
<li>
<p>background-size</p>
<p>设置背景图片的大小</p>
<ol>
<li>宽度</li>
<li>高度    //注意：如果只写一个，第二个值等比例缩放</li>
<li>或者
<ol>
<li>cover //图片比例不变，将图片铺满盒子（图片可能显示不全）</li>
<li>contain  //图片比例不变，将图片完整显示在盒子中（盒子可能放不满）</li>
</ol>
</li>
</ol>
</li>
<li>
<p>background-attachment</p>
<p>背景图片是否跟随元素移动</p>
<ol>
<li>scroll  //默认值  背景图片会跟随元素移动</li>
<li>fixed  //不会跟随元素移动</li>
</ol>
</li>
</ol>
<p>==注意==：</p>
<ol>
<li>背景简写：color url() position no-repeat</li>
<li>size必须写在background-position的后边，并且使用/隔开</li>
<li>origin必须在clip前面</li>
</ol>
<h1 id="精灵图">精灵图</h1>
<p>通过调整background-positon来改变显示的图片，一次性将多个图片加载进页面，降低请求的次数，加快访问速度</p>
<h1 id="渐变">渐变</h1>
<p>渐变是图片，需要通过background-image来设置</p>
<h2 id="线性渐变">线性渐变</h2>
<p>颜色沿着一条直线发生变化，线性渐变的开头可以指定渐变的方向</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">red</span><span class="o">,</span><span class="nt">yellow</span><span class="o">)</span>  <span class="o">//</span><span class="nt">从上往下</span>
<span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">right</span><span class="o">,</span><span class="nt">red</span><span class="o">,</span><span class="nt">yellow</span><span class="o">)</span>  <span class="o">//</span><span class="nt">从左往右</span>  
<span class="o">//</span> <span class="nt">to</span> <span class="nt">top</span> <span class="nt">left</span>
<span class="nt">45deg</span>  <span class="o">//</span><span class="nt">表示旋转的度数</span>
<span class="nt">1turn</span>  <span class="o">//</span><span class="nt">表示旋转的圈数</span>

<span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">red</span><span class="o">,</span><span class="nt">yellow</span><span class="err">，</span><span class="p">#</span><span class="nn">ccc</span><span class="o">,</span><span class="nt">orange</span><span class="o">)</span>

<span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">red</span> <span class="nt">50px</span><span class="o">,</span><span class="nt">yellow</span><span class="o">)</span>  <span class="o">//</span><span class="nt">表示从上到下50px的地方是red最浓的地方</span>
<span class="o">//</span> <span class="nt">表示的是颜色的起始位置</span><span class="err">，</span><span class="nt">默认红色从0开始</span><span class="err">，</span><span class="nt">黄色从底部开始</span><span class="err">，</span><span class="nt">那么渐变的范围就是盒子的高</span>

<span class="nt">repeating-linear-gradient</span><span class="o">(</span><span class="nt">red</span> <span class="nt">50px</span><span class="o">,</span><span class="nt">yellow</span> <span class="nt">100px</span><span class="o">)</span>  <span class="o">//</span><span class="nt">渐变的范围是50px</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="径向渐变">径向渐变</h2>
<p>放射性的效果</p>
<ul>
<li>可以指定径向渐变的==大小==</li>
</ul>
<ol>
<li>
<p>circle  //正圆</p>
</li>
<li>
<p>ellipse  //椭圆</p>
</li>
<li>
<p>closet-side  //只渐变到最近的一条边</p>
<p>farthest-side  //渐变到最远的一条边</p>
<p>closet-corner  //最近的一个角</p>
<p>farthest-side  //最远的一个角</p>
</li>
</ol>
<ul>
<li>
<p>可以指定圆心的==位置==</p>
<p>at center center</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">background-image</span><span class="o">:</span> <span class="nt">radial-gradient</span><span class="o">(</span><span class="nt">100px</span> <span class="nt">100px</span><span class="o">,</span> <span class="nt">red</span><span class="o">,</span> <span class="nt">yellow</span><span class="o">);</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">radial-gradient</span><span class="o">(</span><span class="nt">circle</span><span class="o">,</span> <span class="nt">red</span><span class="o">,</span> <span class="nt">yellow</span><span class="o">);</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">radial-gradient</span><span class="o">(</span><span class="nt">100px</span> <span class="nt">100px</span> <span class="nt">at</span> <span class="nt">0</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">red</span><span class="o">,</span> <span class="nt">yellow</span><span class="o">);</span>
<span class="nt">background-image</span><span class="o">:</span> <span class="nt">radial-gradient</span><span class="o">(</span><span class="nt">cloest-side</span> <span class="nt">at</span> <span class="nt">100px</span> <span class="nt">100px</span><span class="o">,</span> <span class="nt">red</span><span class="o">,</span> <span class="nt">yellow</span><span class="o">);</span>
</code></pre></td></tr></table>
</div>
</div><p>语法总结：</p>
<p>radial-gradient(大小 at 位置，颜色 位置，颜色 位置，颜色 位置)</p>
<h1 id="三角形">三角形</h1>
<ol>
<li>宽高为0</li>
<li>三角指向哪里那个边为none</li>
<li>其他边不能为none，否则会影响目标三角形，所以将其他边颜色设置为==transparent==</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">app</span><span class="p">::</span><span class="nd">after</span><span class="p">{</span>
    <span class="k">border</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">transparent</span><span class="p">;</span>
    <span class="k">border-top</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
    <span class="k">border-bottom-color</span><span class="p">:</span><span class="mh">#ffffff</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h1 id="局部滚动">局部滚动</h1>
<p>overflow:hidden</p>
<p>overflow-y:scroll</p>
<h1 id="过渡效果">过渡效果</h1>
<p>transition：用于为样式设置过度效果</p>
<ol>
<li>
<p>transtion：all 2s  //表示变换所有样式</p>
</li>
<li>
<p>指定变换样式</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">高度由0变大</span><span class="err">，</span><span class="nt">高度为0时设置overflow</span><span class="err">：</span><span class="nt">hidden</span>
<span class="nt">transition</span><span class="err">：</span><span class="nt">height</span> <span class="nt">3s</span><span class="o">//</span><span class="nt">给需要变化样式的元素</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>transition-property：width，height</p>
</li>
<li>
<p>transtition-duration：0.3s，2s</p>
</li>
<li>
<p>transition-timing-function：</p>
<ul>
<li>ease  //默认值，先加速，后减速</li>
<li>linear  //匀速运动</li>
<li>ease-in  //加速运动</li>
<li>ease-out  //减速运动</li>
<li>ease-in-out  //先加速，后减速</li>
<li>steps(2，end/start)  //分步执行</li>
</ul>
</li>
<li>
<p>transition-delay:2s  //过渡效果的延迟执行</p>
</li>
<li>
<p>cubic-bezier() ：贝塞尔曲线来指定</p>
</li>
</ol>
<p>==注意==：</p>
<ol>
<li>过渡时必须是从一个有效值向另一个有效过渡</li>
<li>在使用translation时，需要变化的值必须有一个初始值，比如要变left，则需要变化的元素必须有一个left属性：left：0。</li>
</ol>
<h1 id="动画">动画</h1>
<ol>
<li>动画和过渡类似，都是可以实现一些动态的效果，不同的是动画是自动触发。</li>
<li>设置动画效果，必须要先设置==关键帧==。关键帧设置了动画执行的每一个步骤。</li>
</ol>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>@keyframes 名字</td>
<td>关键帧</td>
<td></td>
</tr>
<tr>
<td>animation-name</td>
<td>使用的关键帧名字</td>
<td></td>
</tr>
<tr>
<td>animation-duration</td>
<td>动画的执行时间</td>
<td></td>
</tr>
<tr>
<td>animation-delay</td>
<td>动画的延迟执行</td>
<td></td>
</tr>
<tr>
<td>animation-timing-function</td>
<td>动画的执行函数（贝塞尔）</td>
<td></td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>动画的执行次数</td>
<td>inifinite：无限执行</td>
</tr>
<tr>
<td>animation-direction</td>
<td>动画运行的方向</td>
<td>normal：默认从from到to    reverse：与normal相反    alternate：去从from到to，回来从to到from，即来回执行    alternate-reverse：与alternate相反</td>
</tr>
<tr>
<td>animation-play-state</td>
<td>动画的执行状态</td>
<td>running：默认动画执行    paused：动画暂停</td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>动画的填充模式</td>
<td>none：默认动画执行完毕，元素回到原来的位置    forwards：停在动画结束的位置    backwards：动画开启了delay，在等待时就进入from的状态</td>
</tr>
</tbody>
</table>
<h1 id="关键帧">关键帧</h1>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">        <span class="p">@</span><span class="k">keyframes</span> <span class="nt">ball</span> <span class="p">{</span>
            <span class="nt">from</span><span class="p">{</span>
                <span class="k">margin-top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nt">20</span><span class="o">%,</span><span class="nt">60</span><span class="o">%,</span><span class="nt">to</span><span class="p">{</span>
                <span class="k">margin-top</span><span class="p">:</span> <span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">animation-timing-function</span><span class="p">:</span> <span class="kc">ease-out</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nt">40</span><span class="o">%</span><span class="p">{</span>
                <span class="k">margin-top</span><span class="p">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nt">80</span><span class="o">%</span><span class="p">{</span>
                <span class="k">margin-top</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h1 id="变形">变形</h1>
<ol>
<li>transform：用来设置元素的变形效果，多个变形效果之间空格隔开</li>
<li>默认是2D变形，如果要显示3D效果，则transform-style：3d，设置在父盒子上</li>
</ol>
<h2 id="平移">平移</h2>
<ol>
<li>变形就是指通过css来改变元素的形状或位置</li>
<li>变形==不会影响页面的布局==</li>
</ol>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>translateX(xxxpx)</td>
<td>沿x轴方向平移</td>
<td>在平移元素时填百分比，是相对于自身去计算的</td>
</tr>
<tr>
<td>translateY(xxxpx)</td>
<td>沿y轴方向平移</td>
<td></td>
</tr>
<tr>
<td>translateZ (xxxpx)</td>
<td>沿z轴方向平移</td>
<td>首先设置视距（人眼距离网页的距离）：html{ perspective：800px},然后值越大，元素越大，否则没有效果。</td>
</tr>
</tbody>
</table>
<p>==注意==：</p>
<ol>
<li>开启绝对定位的元素，在没有设置宽高时，无法用top：0；bottom：0；left：0；right：0；margin：auto；来进行垂直和水平居中。因为根据等式原则，此时宽高和margin同时为auto，会调整宽高。</li>
<li>利用left：50%；//向右移动包含块宽度的一半，transform：translateX(-50%)；//向左移动自身宽度的一半，此时自身的宽度是被内容撑开的。</li>
<li>配合transition过渡食用更佳</li>
<li>一个元素只有一个transform，否则会覆盖</li>
</ol>
<h2 id="平行四边形">平行四边形</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">transform: skewX(-10deg)
</code></pre></td></tr></table>
</div>
</div><h2 id="旋转">旋转</h2>
<ol>
<li>可以使元素沿着x，y，z旋转指定角度</li>
<li>可以先旋转后z轴平移，先z轴平移后旋转</li>
</ol>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>rotateZ（xxxdeg/xturn）</td>
<td></td>
<td>中心轴旋转</td>
</tr>
<tr>
<td>rotateX（xxxdeg/xturn）</td>
<td></td>
<td>要设置视距，才有近大远小的效果，html {     perspective: 800px; }</td>
</tr>
<tr>
<td>rotateY（xxxdeg/xturn）</td>
<td></td>
<td>要设置视距，才有近大远小的效果</td>
</tr>
</tbody>
</table>
<h2 id="缩放">缩放</h2>
<p>对元素进行缩放</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>scaleX()</td>
<td>水平方向缩放</td>
<td>放大x倍</td>
</tr>
<tr>
<td>scaleY()</td>
<td>垂直方向缩放</td>
<td></td>
</tr>
<tr>
<td>scaleZ()</td>
<td>z轴方向拉长</td>
<td>必须要设置trnsform-style：3d</td>
</tr>
<tr>
<td>scale()</td>
<td>水平和垂直</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="变形的原点">变形的原点</h2>
<p>trasform-origin</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>center</td>
<td>默认值</td>
</tr>
<tr>
<td>xxpx xxpx</td>
<td>自定义变形的起始点</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h1 id="计算函数">计算函数</h1>
<p>cale()</p>
<p>可以进行计算，ie9以上支持</p>
<h1 id="less">Less</h1>
<p>css的预处理语言，浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行</p>
<ol>
<li>
<p>可以嵌套</p>
</li>
<li>
<p>可以声名变量：直接使用和当类名使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">@a:10px;
@b:20px;
@c:box6;
.box1{
	width:@a;
	.box2{
		width:@b;
	}
    .@{c}{  //类名
        width:@b;  //直接
    }
}
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>父元素和扩展</p>
<ol>
<li>
<p>&amp;：表示外层的父元素</p>
</li>
<li>
<p>:extend（）：对当前选择器扩展指定选择器的样式</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">.p2:extend(.p1){
    color:red;
}//扩展
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
</li>
<li>
<p>混合函数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">.p3{
	.p1();
}//将p1的样式混合到p3中
</code></pre></td></tr></table>
</div>
</div><p>使用类选择器时可以在选择器后边添加一个括号，实际上就创建了一个mixins</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">.p4(){
	width:100px;
	height:100px;
	bgc:red;
}//这组样式不会显示

.p5{
	.p4;
}//这时会显示样式，因为p4只能给别人用
</code></pre></td></tr></table>
</div>
</div><p>使用混合函数可以添加括号定义变量</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">.test(@w){
	width:@w;
	height:100px;
}
div{
    //调用混合函数，按顺序传递参数
    .test(200px);
}
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h1 id="弹性盒">弹性盒</h1>
<p>css中的又一种布局手段，它主要用来完成页面的布局，flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变</p>
<h2 id="弹性容器">弹性容器</h2>
<ol>
<li>要使用弹性盒，必须将一个元素设置为弹性容器：display：flex（块级弹性容器）/inline-flex（行内的弹性容器）</li>
</ol>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-direction</td>
<td>弹性元素排列方向</td>
<td>row：默认值，由左向右   row-reverse：从右向左    column：纵向（此时纵向为主轴）    column-reverse：从下向上</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>弹性元素是否在弹性容器中自动换行</td>
<td>nowrap：默认值，元素不会自动换行    wrap：元素沿着侧轴方向自动换行    wrap-reverse：元素沿着侧轴反方向换行</td>
</tr>
<tr>
<td>flex-flow</td>
<td>direction和wrap的简写属性</td>
<td>flex-flow：row wrap；</td>
</tr>
<tr>
<td>justify-content</td>
<td>主轴上的元素如何排列</td>
<td>flex-start：元素沿着主轴起边排列    flex-end：元素沿着主轴终边排列    center：元素居中排列，空白都在两侧    space-around：空白分布到元素两侧，所以元素中间的距离是两边的两倍    space-evenly：空白分布到元素单侧，两边和中间的距离相等    space-between：空白均匀分布到元素间，两侧贴边框，没有空白</td>
</tr>
<tr>
<td>align-items</td>
<td>辅轴上的元素如何排列</td>
<td>stretch：默认值，将元素的长度设置为相同的值，指的是一行里元素的高度，并不每一行的高度    flex-start：元素不会拉伸，以辅轴起边对齐    flex-end：元素不会拉伸，以辅轴的终边对齐    center：居中对齐   baseline：沿着文字的基线对齐</td>
</tr>
<tr>
<td>align-content</td>
<td>辅轴上的空间分布</td>
<td>center，flex-start：元素都靠上对齐，flex-end，space-around，space-between</td>
</tr>
</tbody>
</table>
<h2 id="弹性元素">弹性元素</h2>
<ol>
<li>弹性容器的子元素是弹性元素</li>
<li>一个元素可以同时是弹性容器和弹性元素</li>
</ol>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-grow</td>
<td>指定弹性元素的生长系数，当父元素有多余的空间时，子元素如何伸展，父元素的剩余空间会按照比例分配</td>
<td>0：默认值</td>
</tr>
<tr>
<td>flex-shrink</td>
<td>指定弹性元素的收缩系数，当父元素的空间无法容纳子元素时，如何对子元素进行收缩，值越大缩的越多</td>
<td>0：默认值</td>
</tr>
<tr>
<td>flex-basis</td>
<td>元素在主轴上的基础长度，会覆盖width。如果主轴是  横向的  则  该值指定的就是元素的宽度，如果主轴是纵向的  则  该值指定的就是元素的高度</td>
<td>auto：默认值，参考元素自身的高度或宽度，即width和height</td>
</tr>
<tr>
<td>flex</td>
<td>flex：增长  缩减  基础值</td>
<td>initial：默认值，相当于 flex：0 1 auto    auto：相当于 1 1 auto    none：相当于flex：0 0 auto</td>
</tr>
<tr>
<td>order</td>
<td>决定弹性元素的排列顺序</td>
<td>order越小越靠前</td>
</tr>
<tr>
<td>align-self</td>
<td>用来覆盖当前弹性元素上的align-items，和items的可选值一样</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="主轴">主轴</h2>
<p>弹性元素的排列方向</p>
<h2 id="侧轴">侧轴</h2>
<p>与主轴垂直方向的称为侧轴</p>
<h1 id="像素">像素</h1>
<ol>
<li>屏幕是由一个一个发光的小点构成的，这一个个小点就是像素</li>
<li>分辨率：1920*1080就是说屏幕中小点的数量</li>
</ol>
<h2 id="物理像素">物理像素</h2>
<ol>
<li>上述所说的小点就是物理像素</li>
</ol>
<h2 id="css像素">css像素</h2>
<ol>
<li>编写网页时，我们所用的像素</li>
<li>浏览器在显示网页时，需要将css像素转为物理像素然后再呈现</li>
<li>一个css像素最终由几个物理像素显示，由浏览器决定。默认情况下在pc端一个css像素=一个物理像素</li>
</ol>
<h2 id="视口">视口</h2>
<ol>
<li>
<p>屏幕用来显示网页的区域</p>
</li>
<li>
<p>可以通过查看视口的大小（看html的盒模型），来观察css像素和物理像素的比值</p>
</li>
<li>
<p>默认情况下视口宽度1920px（css像素）</p>
<p>​					屏幕宽度 1920px（物理像素）</p>
<p>所以1：1</p>
</li>
<li>
<p>放大两倍</p>
<p>视口宽度：960px</p>
<p>​                   1920px（物理像素）</p>
<p>此时，css像素和物理像素的比为1：2</p>
</li>
<li>
<p>我们可以通过改变视口的大小，来改变css像素和物理像素的比值</p>
</li>
</ol>
<h2 id="手机像素">手机像素</h2>
<ol>
<li>
<p>在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰</p>
</li>
<li>
<p>大部分情况下，手机的像素点要远远小于计算机的像素点</p>
</li>
<li>
<p>问题：一个宽度为900px的网页在iphone中如何显示</p>
<p>默认情况下移动端的网页都会将视口设置为980px，以确保pc端网页可以在移动端正常访问，但是如果网页宽度超过980，移动端浏览器会自动对网页缩放</p>
</li>
<li>
<p>大部分pc端网站都可以在移动端中正常浏览，但往往不会有一个好的体验</p>
</li>
</ol>
<h2 id="完美视口">完美视口</h2>
<ol>
<li>
<p>移动端默认的视口大小是980px（css像素），默认情况下移动端的像素比就是  980/移动端宽度，（980/750）本身移动端像素就小，1个css像素只有0.几的物理像素，就更小了</p>
</li>
<li>
<p>如果直接在网页中编写移动端代码，在980视口下，像素比会导致网页中的内容非常小</p>
</li>
<li>
<p>编写移动端页面，必须要确保有一个合理的像素比</p>
<p>1css像素  对应  2个物理像素,可以通过meta标签来设置视口大小</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width，initial-scale=1.0&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">meta</span><span class="p">&gt;</span>//把视口设置为完美视口（一个css像素对应几个物理像素，调整到每个设备推荐的最佳值）
</code></pre></td></tr></table>
</div>
</div><p>视口/物理像素，调整一个css像素包含多少物理像素</p>
</li>
<li>
<p>每一款移动设备设计时，都会有一个最佳的像素比，一般只需将像素比（视口/屏幕宽度（物理像素））设为该值即可得到一个最佳效果，称为完美视口（达到1：2或者1：3的像素比）</p>
</li>
</ol>
<h1 id="vw">VW</h1>
<ol>
<li>在移动端开发时不能使用px来进行布局</li>
<li>vw表示的是视口的宽度，100vw表示一个视口的宽度</li>
<li>vw永远相对于视口宽度进行计算</li>
</ol>
<h2 id="vw适配">vw适配</h2>
<ol>
<li>
<p>1 rem = 1 html 字体大小，设计图750px</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">html</span><span class="p">{</span>
	<span class="k">font-size</span><span class="p">:</span><span class="mi">100</span><span class="kt">vw</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">box1</span><span class="p">{</span>
	<span class="k">width</span><span class="p">:</span><span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">html</span><span class="p">{</span>
	<span class="k">font-size</span><span class="p">:</span><span class="mf">0.13333333333333</span><span class="kt">vw</span><span class="p">;</span><span class="err">//字体大小为1px</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">box1</span><span class="p">{</span>
	<span class="k">width</span><span class="p">:</span><span class="mi">750</span><span class="kt">rem</span><span class="p">;</span><span class="err">//宽度对应设计图的1px</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>但是网页中字体不能小于12px，所以扩大40倍</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">html</span><span class="p">{</span>
	<span class="k">font-size</span><span class="p">:</span><span class="mf">5.3333333333333</span><span class="kt">vw</span><span class="p">;</span><span class="err">//字体大小为40px</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">box1</span><span class="p">{</span>
	<span class="k">width</span><span class="p">:</span><span class="mf">1.2</span><span class="kt">rem</span><span class="p">;</span><span class="err">//1rem=40px（设计图中的像素）</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h1 id="媒体查询">媒体查询</h1>
<ol>
<li>
<p>响应式布局的关键，可以为不同的设备，或设备的不同状态来分别设置样式</p>
</li>
<li>
<p>语法</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">@</span><span class="k">media</span> <span class="nt">print</span><span class="err">，</span><span class="nt">screen</span><span class="p">{</span>
	<span class="nt">body</span><span class="p">{}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><table>
<thead>
<tr>
<th>查询规则</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>all</td>
<td>所有设备</td>
</tr>
<tr>
<td>print</td>
<td>打印机</td>
</tr>
<tr>
<td>screen</td>
<td>带屏幕的设备</td>
</tr>
<tr>
<td>speech</td>
<td>屏幕阅读器</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>可以在查询规则前加only表示仅仅，兼容老版本浏览器</p>
</li>
<li>
<p>min-width：视口的最小宽度</p>
<p>max-width：视口的最大宽度</p>
<p>，：或</p>
<p>and：与</p>
<p>not：非</p>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">@</span><span class="k">mdia</span><span class="err">（</span><span class="nt">min-width</span><span class="err">：</span><span class="nt">500px00</span><span class="err">）</span><span class="p">{</span><span class="o">//</span><span class="nt">当视口的宽度</span><span class="o">&gt;</span><span class="nt">500px时生效</span>
	<span class="nt">body</span><span class="p">{</span>
	<span class="n">bgc</span><span class="p">:</span><span class="kc">red</span><span class="p">;</span>	
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>​	5.断点</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%96%AD%E7%82%B9.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%96%AD%E7%82%B9.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%96%AD%E7%82%B9.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%96%AD%E7%82%B9.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%96%AD%E7%82%B9.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%96%AD%E7%82%B9.png" /></p>
<h1 id="项目中的知识点">项目中的知识点</h1>
<ol>
<li>一般给body设置min-width来确保网页的最小宽度</li>
<li>一般logo盒子需要设置title，h1标签中需要写官网名字，text-indent：-999px；</li>
<li>宽度100%参考的是包含块的宽度，如果包含块没有设置宽度会自动继承它的包含块的宽度。但是如果包含块开启了绝对定位，那么此时包含块脱离了文档流，宽度不再继承它的包含块，宽度由自身的内容撑开。此时它里面的元素再设置width:100%就不行了，必须先把包含块的宽度确定下来|||||或者给它的祖先开启相对定位，这样绝对定位的又会继承开启了相对定位的祖先元素的宽度</li>
<li>input里面存在默认的padding和2px的边框，会影响高度。一般把padding：0，border：none。给父元素设置边框。</li>
<li>button默认是border-box,也有默认的border和padding</li>
<li>input的轮廓线是focus，不是hover。轮廓线是outline不是border</li>
<li>opacity设置元素透明度</li>
<li>text-align-last：justify；最后一行文本两端对齐</li>
<li>一般存储在网站的根目录下，名字一般叫做favicon.ico //<link rel="icon" href="./favicon.ico"></li>
<li>inline-block不会受前面的浮动元素的影响，会像文字环绕在浮动元素周围</li>
<li>视距perspective无法继承，要么设置在html标签上，在需要3d效果的父元素上设置transform-style：3d，，要么直接将perspective设置在父元素上</li>
</ol>
</div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-08</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识" data-via="xxxx" data-hashtags="html,css"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-hashtag="html"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 WhatsApp" data-sharer="whatsapp" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识"><i data-svg-src="/lib/simple-icons/icons/line.min.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识"><i class="fab fa-weibo fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Myspace" data-sharer="myspace" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识" data-description=""><i data-svg-src="/lib/simple-icons/icons/myspace.min.svg"></i></a><a href="javascript:void(0);" title="分享到 Blogger" data-sharer="blogger" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识" data-description=""><i class="fab fa-blogger fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Evernote" data-sharer="evernote" data-url="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" data-title="html&amp;css基础知识"><i class="fab fa-evernote fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/html/">html</a>,&nbsp;<a href="/tags/css/">css</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/springmvc/" class="prev" rel="prev" title="SpringMVC"><i class="fas fa-angle-left fa-fw"></i>SpringMVC</a>
            <a href="/posts/javascript/" class="next" rel="next" title="javascript">javascript<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.89.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://github.com/yzuxqz" target="_blank">yzuxqz</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/katex/katex.min.css"><link rel="stylesheet" href="/lib/katex/copy-tex.min.css"><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript" src="/lib/katex/katex.min.js"></script><script type="text/javascript" src="/lib/katex/auto-render.min.js"></script><script type="text/javascript" src="/lib/katex/copy-tex.min.js"></script><script type="text/javascript" src="/lib/katex/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
